<template>
  <div id="BigFileUpload">
    <uploader
      :options="options"
      class="uploader-example"
      @file-success="onHandleSuccess"
      @file-progress="onHandleProgress"
      @file-error="onFileError"
    >
      <uploader-unsupport />
      <uploader-drop>
        <p>大文件上传（请单独上传大小超过100M的文件）</p>
        <uploader-btn :attrs="attrs">上传</uploader-btn>
        <!-- <uploader-btn :directory="true" :attrs="attrs">上传视频文件夹</uploader-btn> -->
      </uploader-drop>
      <uploader-list />
    </uploader>
  </div>
</template>

<script>
import { mergeFile } from '@/api/documentation/management'

export default {
  name: 'BigFileUpload',

  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      options: {
        simultaneousUploads: 1,
        target: process.env.VUE_APP_BASE_API + '/back/uploader/chunk', // 目标上传 URL
        chunkSize: 1024 * 1024 * 5, // 分块大小 基本单位KB
        fileParameterName: 'file', // 上传文件时文件的参数名，默认file
        maxChunkRetries: 3, // 最大自动失败重试上传次数
        testChunks: false, // 是否开启服务器分片校验
        // 服务器分片校验函数，秒传及断点续传基础
        checkChunkUploadedByResponse: function(chunk, message) {
          const objMessage = JSON.parse(message)
          if (objMessage.skipUpload) {
            return true
          }
          return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
        },
        headers: 'Bearer ' + this.$store.getters.token
      },
      attrs: {
        // 接受的文件类型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...]
        accept: []
      }
    }
  },
  methods: {
    async onHandleSuccess(rootFile, file, message, chunk) {
      const { fileName } = JSON.parse(message)
      const filename = fileName.split('/')[3]
      const res = await mergeFile({
        filename: filename
      })
      console.log('res', res)
      // 如果服务端返回需要合并
      // needMerge 后端返回数据 是否需要合并
    },
    onHandleProgress(rootFile, file, chunk) {
    },
    onFileError(rootFile, file, response, chunk) {
    }
  }
}
</script>

<style scoped>
</style>
